import React from 'react';
import { SVGFont } from 'web-component';
import './demo.less';

export default () => {
  return (
    <div>
      <SVGFont
        styles={{
          fontFamily: 'PingFangSC-Medium, PingFang SC',
        }}
      >
        <SVGFont.Span fontSize={12} color="#FF3333">
          ¥
        </SVGFont.Span>
        <SVGFont.Span fontSize={24} color="#FF3333" dx={'20px'}>
          9999
        </SVGFont.Span>
        <SVGFont.Span fontSize={6} color="#FF3333">
          .99
        </SVGFont.Span>
      </SVGFont>
      <br />
      <SVGFont>
        <SVGFont.Span fontSize={12}>我是</SVGFont.Span>
        <SVGFont.Span fontSize={24}>一个</SVGFont.Span>
        <SVGFont.Span fontSize={12}>大</SVGFont.Span>
        <SVGFont.Span fontSize={6}>帅比</SVGFont.Span>
      </SVGFont>
      <br />
      <SVGFont
        styles={{
          fontFamily: 'Babyfont-Bold, babyfont',
        }}
      >
        <SVGFont.Span fontSize={12}>¥</SVGFont.Span>
        <SVGFont.Span fontSize={12}>{null}</SVGFont.Span>
        <SVGFont.Span fontSize={24}>9</SVGFont.Span>
        <SVGFont.Span fontSize={12}>.9</SVGFont.Span>
        <SVGFont.Span fontSize={12}>折</SVGFont.Span>
        <SVGFont.Span fontSize={12}>{''}</SVGFont.Span>
      </SVGFont>
    </div>
  );
};
